<template>
  <view class="newTab">
    <view class="headerContent">
      <view class="rezufather d-s-c d-r">
        <image
          src="https://shoujizulin2.rchz.top/image/rezu.png"
          class="rezu"
        ></image>
        <view style="width: 70%">
          <u-tabs
            :list="list"
            lineWidth="30"
            lineColor="#5BC5BB"
            :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }"
            :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)',
            }"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            @change="changeHandle"
          ></u-tabs>
        </view>
      </view>
    </view>
    <view>
      <scroll-view
        style="display: block"
        class="product-list column__3 scroll-view_H"
        scroll-x="true"
      >
        <view
          class="product-item scroll-view-item_H"
          v-for="(product, index) in itemData.data"
          :key="index"
          @click="gotoDetail(product.product_id)"
        >
          <!-- 两列三列 -->
          <view class="product-cover">
            <image :src="product.product_image" mode="aspectFill"></image>
          </view>
          <view class="product-info">
            <view
              v-if="itemData.style.show.productName == 1"
              class="product-title"
            >
              {{ product.product_name }}
            </view>
            <view class="price d-s-c">
              <view
                v-if="itemData.style.show.productPrice == 1"
                class="theme-price"
                style="width: 100%"
              >
                <view class="moneyDay">
                  <view class="">
                    <text class="f22">¥</text>
                    <text class="" style="font-weight: 600">{{
                      product.product_price
                    }}</text>
                    <text class="f22">/天</text>
                  </view>
                  <view class="">
                    <text
                      class="f22"
                      style="color: #ccc; text-decoration: line-through"
                      >11.99/天</text
                    >
                  </view>
                </view>
              </view>
              <view
                class="ml20 gray9 text-d-line"
                v-if="
                  itemData.style.show.linePrice == 1 && product.line_price > 0
                "
                ><text class="f22">¥</text>{{ product.line_price }}/天5</view
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemData: {
        data: [],
        group: "shop",
        name: "商品组",
        params: {
          source: "choice",
          auto: { category: 65, productSort: "all", showNum: "6" },
        },
        style: {
          background: "#F6F6F6",
          display: "list",
          show: {
            linePrice: 0,
            productName: 1,
            productPrice: 1,
            productSales: 0,
            sellingPoint: 0,
          },
        },
        type: "product",
      },
      list: [
        {
          name: "新品爆款",
        },
        {
          name: "清仓大促",
        },
        {
          name: "潮玩体验",
        },
        {
          name: "休闲益智",
        },
      ],
    };
  },
  props: ["dataList"],
  watch: {
    dataList: {
      handler(newVal, oldVal) {
        console.log("newList:", newVal);
        this.getList(newVal);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    changeHandle({ index }) {
      this.queryGroup(index)
    },
    /*跳转产品详情*/
    gotoDetail(e) {
      let url = "/pages/product/detail/detail?product_id=" + e;
      this.gotoPage(url);
    },
    getList(list) {
      console.log("newList:", list);
      const result = list.data.map((item) => ({
        product_id: item.product_id,
        product_name: item.product_name,
        product_price: item.product_price,
        product_image: item.product_image,
        product_sales: item.product_sales,
      }));
      this.itemData.data.length === 0 && this.itemData.data.push(...result);
      console.log(result);
    },

    queryGroup(index) {
      const self = this;
      const categoryIdList = [60, 12, 13, 14];

      const params = {
        category_id: categoryIdList[index],
        list_rows: 9,
        page: 1,
        search: 0,
        sortPrice: 0,
        sortType: "all",
      };

      this._get(
        "/product.product/lists",
        params,
        function ({ data: { list } }) {
          self.itemData.data = [...list.data];
        }
      );
    },
  },
};
</script>

<style>
.newTab {
  border-radius: 20rpx;
  overflow: hidden;
  margin: 20rpx 0;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}
.rezufather {
  width: 100%;
  height: 80rpx;
  padding-left: 20rpx;
  background-image: linear-gradient(
    to bottom,
    #b3efee 0%,
    #d2eeee 50%,
    #ffffff 100%
  );
}
.rezu {
  height: 15px;
  width: 66px;
}
.newTab .headerContent {
  display: flex;
}
.newTab .product-list .product-cover image {
  width: 70%;
  height: 95%;
  margin: 0 auto;
}
.newTab .product-list .product-title {
  display: -webkit-box;
  font-size: 32rpx;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.newTab .product-list .product-info {
  white-space: normal;
}
.newTab .product-list.column__3 .product-title {
  margin-top: 20rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  height: 72rpx;
  line-height: 36rpx;
  font-size: 30rpx;
}
.newTab .product-list .price {
  font-size: 34rpx;
}
.newTab .product-list.column__3 .price {
  margin-top: 10rpx;
  padding: 0 10rpx;
  font-size: 28rpx;
}

.newTab .product-list.column__3 .price .text-d-line {
  font-size: 22rpx;
}
.newTab .display__slide .product-list {
  flex-wrap: nowrap;
}
.newTab .column__3 .product-cover {
  width: 200rpx;
  height: 200rpx;
}
.newTab .display__list .column__3 .product-item:nth-child(3n + 0) {
  margin-right: 0;
}
.newTab .column__3 .product-item {
  width: 200rpx;
  margin-bottom: 10rpx;
  margin-right: 10rpx;
  padding-bottom: 10rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.theme-price {
  color: #ff6975;
}
.moneyDay {
  text-align: center;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100px;
  height: 100%;
  margin-right: 5px;
  text-align: center;
}
</style>
